<template>
  <a-layout :style="{width: '100%'}">
    <top-bar/>
    <a-layout-content :style="{padding: '0 50px', marginTop: '64px', minHeight: '620px'}">
      <a-menu @select="selectMenu" v-model:selectedKeys="current" mode="horizontal" :items="items" />
      <a-table bordered :columns="columns" :data-source="data"  @change="onChange" :pagination="{ pageSize: pageSize, total: total}">
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'orderItems'">
            <a-list item-layout="vertical" :data-source="record.orderItems">
              <template #renderItem="{ item }">
                <a-list-item style="margin-top: 6px">
                  <template #extra>
                    <img
                        width="90"
                        alt="logo"
                        :src="item.skuPic"
                    />
                  </template>
                  <a-list-item-meta
                      description="这里可以放介绍信息"
                  >
                    <template #title>
                      {{ item.spuName }}
                    </template>
                  </a-list-item-meta>
                  <a-descriptions>
                    <a-descriptions-item label="单价">￥{{item.skuPrice}}</a-descriptions-item>
                    <a-descriptions-item label="数量">x{{item.count}}</a-descriptions-item>
                    <a-descriptions-item label="小计">
                      <a-typography-text strong>
                        ￥{{item.totalPrice}}
                      </a-typography-text>
                    </a-descriptions-item>
                    <a-descriptions-item><a-tag color="cyan" v-for="attr in item.skuAttrsVals">{{attr}}</a-tag><br/></a-descriptions-item>
                    <a-descriptions-item v-if="item.hasStock === false"><a-tag color="warning">
                      <template #icon>
                        <exclamation-circle-outlined />
                      </template>无货</a-tag></a-descriptions-item>
                  </a-descriptions>
                </a-list-item>
              </template>
            </a-list>
          </template>
        </template>
      </a-table>
    </a-layout-content>
    <tail-bar/>
  </a-layout>
</template>

<script setup>
import TopBar from "@/components/common/TopBar.vue";
import TailBar from "@/components/common/TailBar.vue";
import {h, ref, onBeforeMount, watch} from 'vue';
import {MailOutlined, AppstoreOutlined, SettingOutlined, ExclamationCircleOutlined} from '@ant-design/icons-vue';
import request from "@/utils/request";
import {message} from "ant-design-vue";


const current = ref(['all']);

const items = ref([
  {
    key: 'all',
    icon: () => h(MailOutlined),
    label: '全部订单',
    title: '全部订单',
  },
  {
    key: 'obligation',
    icon: () => h(AppstoreOutlined),
    label: '待付款',
    title: '待付款',
  },
  {
    key: 'DropShipping',
    icon: () => h(AppstoreOutlined),
    label: '待发货',
    title: '待发货',
  },
  {
    key: 'preAccept',
    icon: () => h(AppstoreOutlined),
    label: '待收货',
    title: '待收货',
  },
]);

//监听菜单选择，重载数据
const selectMenu = ({key})=>{
  console.log(key)
  let status = null
  switch (key){
    case 'obligation':
      status = '0';
      break;
    case 'all' :
      status = null;
      break;
    case 'DropShipping':
      status = 1;
      break;
    case 'preAccept':
      status = 2;
      break

  }
  if(status !== null){
    getOrderItems(0,{field: 'createTime', order: 'DESC'},status)
  } else {
    console.log('状态为 all')
    getOrderItems(0,{field: 'createTime', order: 'DESC'})
  }
}

const columns = [
  {
    title: '订单详情',
    dataIndex: 'orderItems',
    key: 'orderItems',
    width: 760,
  },
  {
    title: '收货人',
    dataIndex: 'receiverName',
    key: 'receiverName'
  },
  {
    title: '金额',
    dataIndex: 'totalAmount',
    key: 'totalAmount',
    sorter: (a, b) => a.totalAmount - b.totalAmount,
  },
  {
    title: '创建时间',
    dataIndex: 'createTime',
    key: 'createTime',
    defaultSortOrder: 'descend',
    sorter: (a, b) => a.createTime - b.createTime,
  },
  {
    title: '状态',
    dataIndex: 'status',
    key: 'status',
  },
  {
    title: '操作',
    dataIndex: 'operation',
  }
];

//订单数据
let data = ref([])
let total = ref(0)
let pageSize = ref(4)

const getOrderItems= (current, sort, status) => {
  let params = {currentPage: current, limit: pageSize.value}
  if(typeof sort !== "undefined"){
    params['sort'] = `${sort.field}_${sort.order}`
  }
  if(typeof status !== "undefined"){
    params.status = status
  }
  request({
    url: '/auth/user/order/getOrders',
    method: 'get',
    params: params
  }).then(res => {
    console.log(res)
    if(res.code === 0){
      total.value = res.data.totalCount
      data.value = []
      res.data.list.forEach(item => {
        item['key'] = item.id
        item.orderItems.forEach(i=>{
          i.skuAttrsVals = JSON.parse(i.skuAttrsVals)
        })
        data.value.push(item)
      })
    } else {
      message.info(res.msg)
    }
  }).catch(err => {
    console.log(`获取订单异常-${err.message}`)
    message.error(`获取订单异常-${err.message}`)
  })
}

const onChange = (pagination, filters, sorter) => {
  console.log('params', pagination, filters, sorter);
  if(typeof sorter.order != "undefined"){
    getOrderItems(pagination.current, {field: sorter.field, order: sorter.order==='descend' ? 'DESC' : 'ASC'})
  } else {
    getOrderItems(pagination.current)
  }

};

onBeforeMount(_=>{
  getOrderItems(1, {field: 'createTime', order: 'DESC'})
})

</script>